<template>
	<view class="page w-full h-100vh bg-fffbf4 flex flex-col align-items-center">
		<view class="navBar w-full pl-30 pr-30 pt-40 z-9999">
			<view class="title text-581403 f-40 text-bold text-center">
				{{ detail.title }}
				<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
			</view>
		</view>

		<view class="content flex flex-col align-items-center mt-40">
			<view class=" rich" v-html="detail.content"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const {
		api_get_articlesDetail
	} = useRequest();

	const detail = ref({})

	const loadDetail = (id) => {
		api_get_articlesDetail(id).then(res => {
			detail.value = res
		})
	}

	onLoad((options) => {
		if (options.id) {
			loadDetail(options.id)
		}
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 80rpx 40rpx 40rpx 40rpx;
		height: 1338rpx;
		background-image: url('/src/static/bg-06.png');
		background-size: 100%;
		background-repeat: no-repeat;

		.rich {
			width: 610rpx;
			height: 1200rpx;
			overflow-y: auto;
			scrollbar-width: none;
			/* Firefox 兼容 */
			-ms-overflow-style: none;
			/* IE/Edge 兼容 */
		}

	}
</style>